<template>
  <div class="userList back-white">
    <el-container>
      <el-main>
        <el-form label-width="80px">
          <el-form-item label="用户账号"><el-input v-model="account"></el-input></el-form-item>
          <el-form-item>
            <el-select v-model="statusSelect" placeholder="请选择">
              <el-option
                v-for="item in statusList"
                :key="item.status"
                :label="item.text"
                :value="item.status">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item><el-button type="primary" @click="getData">查询</el-button></el-form-item>
        </el-form>
        <div class="x-item x-item-none back-white">
            <el-table border :data="list">
              <el-table-column label="id" prop="id" width="80px"></el-table-column>
              <el-table-column label="用户账号" prop="phone"></el-table-column>
              <el-table-column label="用户昵称" prop="user_name"></el-table-column>
              <el-table-column label="会员等级" prop="level">
                <template slot-scope="scope">
                  <span v-if="scope.row.level == 'level_one'">游客</span>
                  <span v-if="scope.row.level == 'level_two'">会员</span>
                  <span v-if="scope.row.level == 'level_three'">高级会员</span>
                </template>
              </el-table-column>
              <el-table-column label="性别" prop="sex">
                <template slot-scope="scope">
                  <el-tag v-if="scope.row.sex == 0">男</el-tag>
                  <el-tag v-if="scope.row.sex == 1" type="danger">女</el-tag>
                </template>
              </el-table-column>
              <el-table-column label="审核状态" prop="status">
                <template slot-scope="scope">
                  <span v-if="scope.row.status == 0">正常</span>
                  <span v-if="scope.row.status == 1">冻结</span>
                  <span v-if="scope.row.status == 2">申请高级会员中</span>
                </template>
              </el-table-column>
              <el-table-column label="账号启用状态" prop="is_delete">
                <template slot-scope="scope">
                  <el-switch :active-value="scope.row.status == 1"></el-switch>
                </template>
              </el-table-column>
              <el-table-column label="操作" prop="status">
                <template slot-scope="scope">
                  <el-button type="text" size="small" @click="userDelete(scope.row.id)">删除</el-button>
                  <el-button type="text" size="small" @click="setApply(scope.row)" v-if="scope.row.status == 2">查看凭证</el-button>
                </template>
              </el-table-column>
            </el-table>
          <div class="pdtb075 tc">
            <el-pagination
              background
              layout="prev, pager, next"
              @current-change="pageChange"
              :total="pageCount">
            </el-pagination>
          </div>
          </div>
      </el-main>
      <!-- 申请凭证弹窗 -->
      <el-dialog title="查看申请凭证" :visible="applySwitch" :before-close="ai_dialog_close">
          <el-carousel height="360px" arrow="always">
            <el-carousel-item v-for="img in applyImgList" :key="img">
              <div class="imgBox">
                <img :src="'http://renqing123.oss-cn-shenzhen.aliyuncs.com/' + img" alt="">
              </div>
            </el-carousel-item>
          </el-carousel>
        <div slot="footer" class="dialog-footer">
          <el-button @click="examineStatus(0)">拒绝</el-button>
          <el-button type="primary" @click="examineStatus(1)">同意</el-button>
        </div>
      </el-dialog>
    </el-container>
  </div>
</template>
<script type="text/ecmascript-6">
  import {getDateList,createData} from '../../api/api';
  export default {
    data(){
      return {
        account: '', //用户账号
        statusList: [
          {status: "0 2,in",text: '全部'},
          {status: "0",text: '正常'},
          {status: "1",text: '禁用'},
          {status: "2",text: '申请高级会员'}
        ], //状态列表
        statusSelect: "0 2,in", //选择的状态
        list: [], //用户列表
        pageCount: 0, //总数
        curPage:1, //当前页数
        applySwitch: false, //申请凭证弹窗开关
        applyImgList: [], //申请凭证图片列表
        applyId: '' //申请的id
      }
    },
    created(){
      this.getData();
    },
    methods:{
      getData(){ //获取用户列表数据
        let o = {
          "model": "Users",
          "offset": this.curPage - 1,
          "limit":10,
          "with":{
          },
          "orderBy":"create_time desc",
          "condition": {
            "is_delete":0,
            "status":this.statusSelect
          },
          "search": {
          }
        };
        if(this.account){
          o.search.phone = this.account;
        }

        getDateList(o).then((data) => {
          console.log(data);
          this.list = data.data.data.data;
          this.pageCount = data.data.data.count - 0;
        })
      },
      pageChange(e){
        this.curPage = e;
        this.getData();
      },
      setApply(data){ //设置查看的申请凭证的图片列表
         this.applyImgList = data.level_images.split(',');
        this.applyId = data.id;
        this.applySwitch = true;
      },
      ai_dialog_close(){
        this.applySwitch = false;
      },
      examineStatus(result){ //用户申请审核
        let o =  {
          "model": "Users",
          "data": {
            "status": "0"
          },
          "update_condition":{
            "id":this.applyId
          }
        };
        if(result){
          o.data.level = "level_three"
        }
        createData(o).then((data) => {
          if(data.data.code == 200){
            this.applySwitch = false;
            this.getData();
          }
        })
      },
      searchCondition(){ //上部条件查询
         console.log(this.statusSelect);
      },
      userDelete(id){ //用户删除操作
        this.$confirm('要删除这个用户吗?','提示',{
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'info '
        }).then(() => {
          this.delFn(id);
        });
      },
      delFn(id){ //删除请求
        let o =  {
          "model": "Users",
          "data": {
            "is_delete": "1"
          },
          "update_condition":{
            "id":id
          }
        };
        createData(o).then((data) => {
          if(data.data.code == 200){
            this.applySwitch = false;
            this.getData();
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
          }else{
            this.$message({
              type: 'error',
              message: '删除失败'
            });
          }
        })
      }
    }
  }
</script>
<style lang="scss">
  .userList .el-form-item{
    display: inline-block;
    width: 260px;
  }
</style>
